<template>
	<view class="wrap" :class="lang">
		<u-navbar :custom-back="fanhui" :is-fixed="true" :title="title" back-icon-name="arrow-left">
			<view class="slot-wrap greenbg heigh150">
				<view class="u-navbar-centent-slot">
					<!-- <text>购卡中心</text> -->
				</view>
			</view>
		</u-navbar>
		<view class="viewvideo">
			<video id="myVideo" :poster="videopic" :src="videourl" class="videoc" objectFit="contain"
				controls="true"></video>
		</view>

		<view class="clearfloat"></view>
		<view class="videolayout">
			<view class="vtabs">
				<u-tabs-swiper activeColor="#0DA0FF" bg-color="rgba(255,255, 255, 0)" inactive-color="#5e5e5e"
					height="60" ref="tabs" font-size="28" :list="listnav" :current="current" @change="change"
					:is-scroll="false" swiperWidth="680"></u-tabs-swiper>
			</view>
		</view>
		<view class="vcontent">
			<swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="contentitem">
							<rich-text class="contentitem" :class="lang != 'cn'?'kzuytxt font-32':'font-32'"
								style="text-align: justify;" :nodes="content"></rich-text>
						</view>

					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="contentitem">
							<view class="subject-video-layout">
								<videoitems v-for="(item, index) in videolist" :key="index" :lang="lang" :ids="item.vid"
									:pic="item.imgurl" :title="item.name" :count="item.bofangcount" :itemlist="item">
								</videoitems>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
	</view>
</template>

<script>
	import videoitems from '@/components/videoitem/videoitem.vue';
	import {
		formatRichText
	} from '../../common/tools.js';
	//接口
	import {
		//wxlogin_api, //微信登陆接口
		//applelogin_api, //苹果一键登录接口
		videolist_api, //视频列表接口
		hitsvideo_api, //统计视频点击率
		videocon_api
	} from '@/api/index';
	export default {
		components: {
			videoitems //视频模块
		},
		data() {
			return {
				lang: this.$i18n.locale,
				title: '',
				autoplay: false,
				videourl: '',
				videopic: 'https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/guanggao/02.png', //这个必须是网络图片
				content: '',
				kemu: 5,
				//tabs
				listnav: [{
						name: this.$t('mediatxt.图文详解')
					},
					{
						name: this.$t('mediatxt.相关视频')
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
				videolist: [],
				vtype: 0
			};
		},
		onUnload() {
			this.videoContext = uni.createVideoContext('myVideo');
			this.videoContext.pause();
		},
		onBackPress(options) {
			var that = this;
			console.log("返回键")
			this.videoContext = uni.createVideoContext('myVideo');
			this.videoContext.pause();
			//that.fanhui();
		},
		//页面准备好时创建video
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},

		//离开页面时暂停视频播放
		onHide() {
			this.videoContext.pause();
		},

		onLoad(options) {
			var that = this;
			console.log("options", options);
			this.videoContext = uni.createVideoContext('myVideo');
			this.videoContext.pause();

			that.kemu = options.kemu;
			if (options.autoplay == "1") {
				that.autoplay = true;
			} else {
				that.autoplay = false;
			}
			that.videoxglist(options.kemu, options.type, options.vid);
			that.hitscountvideo(options.vid);
			that.videocontent(options.vid);
			//演示
			if (options.cuunt == '1') {
				that.current = 1;
				that.swiperCurrent = 1;
			}

		},
		methods: {
			fanhui() {
				uni.redirectTo({
					url: "../index/index"
				})
			},
			videocontent(vids) {
				var that = this;

				that.https({
					url: videocon_api,
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {
						vid: vids
					},
					success: res => {
						var videoinfo = res.video;
						console.log("videoinfo", videoinfo);

						that.title = videoinfo.name;
						that.vtype = videoinfo.type;
						that.videourl = videoinfo.url;
						that.videopic = videoinfo.imgurl;
						that.content = formatRichText(videoinfo.description);
						// console.log("videoinfo.description", videoinfo.description)
						// that.kemu2videolist = res.kemu2;
						// that.kemu3videolist = res.kemu3;
					},
					fail: err => {
						console.log(err);
					}
				});
			},
			hitscountvideo(vids) {
				var that = this;

				that.https({
					url: hitsvideo_api,
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {
						vid: vids
					},
					success: res => {


					},
					fail: err => {
						console.log(err);
					}
				});
			},
			videoxglist(kemu, types, vids) {
				console.log("kemu0000===", kemu);
				var that = this;
				console.log("jinru video list")
				that.https({
					url: videolist_api,
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {
						type: types
					},
					success: res => {
						//console.log(res);
						if (types == 0) {

							if (kemu == "2") {
								var kemu2video = res.kemu2;
								if (res.kemu2.length > 0) {
									var kemusort = [];
									var arthndahe = [];
									var newvideolist = [];
									for (var i = 0; i < kemu2video.length; i++) {
										if (kemu2video[i].vid > vids) {
											kemusort.push(kemu2video[i]);
										}

									}
									for (var i = 0; i < kemu2video.length; i++) {
										if (kemu2video[i].vid < vids) {
											arthndahe.push(kemu2video[i]);
										}
									}
									newvideolist = kemusort.concat(arthndahe);

									delete newvideolist.url;
									delete newvideolist.url;
									that.videolist = newvideolist;
									var vlist = res.kemu2;
									//var vindex = vlist.indexOf(vlist.filter(d=>d.vid == vids)[0]);
								}

							} else {
								var kemu3video = res.kemu3;
								var kemusort = [];
								var arthndahe = [];
								var newvideolist = [];
								for (var i = 0; i < kemu3video.length; i++) {
									if (kemu3video[i].vid > vids) {
										kemusort.push(kemu3video[i]);
									}

								}
								for (var i = 0; i < kemu3video.length; i++) {
									if (kemu3video[i].vid < vids) {
										arthndahe.push(kemu3video[i]);
									}
								}
								newvideolist = kemusort.concat(arthndahe);
								delete newvideolist.description;
								delete newvideolist.description;
								delete newvideolist.url;
								delete newvideolist.url;
								that.videolist = newvideolist;
								var vlist = res.kemu3;
								//var vindex = vlist.indexOf(vlist.filter(d=>d.vid == vids)[0]);
							}




						} else {
							var vlist = res.kemu;
							//var vindex = vlist.indexOf(vlist.filter(d=>d.vid == vids)[0]);



							that.videolist = res.kemu;
						}

						// that.kemu2videolist = res.kemu2;
						// that.kemu3videolist = res.kemu3;
					},
					fail: err => {
						console.log(err);
						uni.showModal({
							title: '服务出现错误',
							cancel: false,
							content: err,
							success: function(res) {}
						});
					}
				});
			},
			reachBottom() {
				// 此tab为空数据
				console.log('jiazai');
				// if(this.current != 2) {
				// 	this.loadStatus.splice(this.current,1,"loading")
				// 	setTimeout(() => {
				// 		this.getOrderList(this.current);
				// 	}, 1200);
				// }
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				//this.getOrderList(index);
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	};
</script>

<style>
	page {
		background: #ffffff;
	}

	.kzuy {
		direction: rtl;
	}

	.kzuytxt {
		direction: rtl;
		text-align: right;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		/* height: calc(100vh - var(--window-top)); */
		height: calc(100vh - 44px);
		/* height: 100vh; */
		width: 100%;
	}

	.videoshow {
		width: 750rpx;
		min-height: 440rpx;
	}

	.videoshow video {
		width: 750rpx;
		min-height: 400rpx;
	}

	/* 视频详细模块 */
	.viewvideo {
		width: 750rpx;
		height: 420rpx;
		position: relative;
	}

	.videoc {
		width: 750rpx;
		height: 420rpx;
		/* min-height: 400rpx; */
	}

	.swiper-box {
		flex: 1;
		height: 100%;
	}

	.swiper-item {
		height: 100%;
		width: 680rpx;
		margin: 0 auto;
	}

	.videolayout {
		width: 680rpx;
		margin: 30rpx auto 0rpx auto;
		flex: 1;
		height: 100%;
	}

	.vtabs {
		width: 680rpx;
		/* background: #f7f7f7; */
		/* border-radius: 20rpx; */
	}

	.vcontent {
		padding-top: 20rpx;
		height: 100%;
		width: 100%;
	}

	.contentitem {
		width: 680rpx;
		margin: 0 auto;
	}

	/* 视频模块 */
	.subject-video-layout {
		width: 680rpx;
		display: flex;
		justify-content: space-between;
		flex-flow: row wrap;
	}
</style>
